import { javascript } from "@codemirror/lang-javascript";
import { Modal, Tour, TourProps } from "antd";
import CodeMirror from '@uiw/react-codemirror';
import { memo, useEffect, useRef, useState } from "react";

// 引导用户使用
const TourAi = () => {
    const [tour, setTour] = useState(false)

    useEffect(() => {
        const tour = localStorage.getItem("tourAi")
        if (!tour) {
            localStorage.setItem("tourAi", "tour")
            setTour(true)
        }
    }, [])

    const steps: TourProps['steps'] = [
        {
            title: '欢迎来到新手指引',
            description: 'RAG编排工具简单化RAG的构建方式，专门增对Markdown数据做进一步优化，达到合理最佳效果',
            cover: (
                <img
                    alt="tour.png"
                    src="img/rag.png"
                />
            ),
        },
        {
            title: 'AI聊天',
            description: 'AI聊天窗口可以根据你当前的编排进行回答',
            target: () => document.querySelector("#root > button:nth-child(2)")
        },
        {
            title: '日志',
            description: '用来存储编排后的流程',
            target: () => document.querySelector("#root > button:nth-child(3)"),
        },
        {
            title: '保存',
            description: '保存当前编排数据',
            target: () => document.querySelector("#root > button:nth-child(4)"),
        },
        {
            title: '编排',
            description: '拖拽当前的组件到画布，通过连接各个组件的关系建立RAG',
            target: () => document.querySelector("#rag-orchestration"),
        },
        {
            title: '知识构建',
            description: '主要用来构建MarkDown数据，通过导入数据切分数据，对文档进行分块',
            target: () => document.querySelector("#knowledge—base"),
        }
    ];
    // #rag-orchestration
    return <Tour open={tour} onClose={() => setTour(false)} steps={steps} />
}

export default memo(TourAi);